<template>
  <div class="departments-container">
    <el-card class="box-card">
      <!-- 标题 -->
      <tree-tools
        :tool-node="company"
        :isRoot="false"
        @addDig="addDig"
      ></tree-tools>

      <!-- 内容 -->
      <el-tree
        style="margin:20px 0"
        :data="depts"
        :props="defaultProps"
        @node-click="handleNodeClick"
        expand-on-click-node
      >
        <!-- 树形结构中的组件 -->
        <tree-tools
          @editDig="editDig"
          @addDig="addDig"
          @refreshTree="getDepartmentList"
          :tool-node="data"
          slot-scope="{ data }"
        ></tree-tools>
      </el-tree>
    </el-card>

    <!-- 编辑对话框 -->

    <dialog-tree-edit
      :dialogFormVisible.sync="dialogFormVisible"
      :nodeData="nodeData"
      @refreshTree="getDepartmentList"
    ></dialog-tree-edit>
  </div>
</template>

<script>
import { departmentApi } from "@/api/departments";
// import treeTools from "./components/tree-tools";

import dialogTreeEdit from "./components/dialog";

import { tranListToTreeData } from "@/utils";


export default {
  // mixins:[],
  components: {
    // treeTools,
    dialogTreeEdit
  },
  data() {
    return {
      dialogFormVisible: false,
      nodeData: {},
      company: {},
      depts: [
        {
          name: "总裁办",
          manager: "曹操",
          children: [{ name: "董事会", manager: "曹丕" }]
        },
        { name: "行政部", manager: "刘备" },
        { name: "人事部", manager: "孙权" }
      ],

      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  },
  created() {
    this.getDepartmentList();
  },
  methods: {
    //  显示编辑对话框
    editDig(nodeData) {
      this.dialogFormVisible = true;
      this.nodeData = nodeData;
      //console.log(this.nodeData, 123);
    },
    addDig(nodeData) {
      console.log(nodeData, 33344455);
      /* 添加部门 */
      nodeData.addFlag = true;
      this.nodeData = nodeData; //  获取当前点击行的所有的数据
      this.dialogFormVisible = true;
    },
    handleNodeClick(data) {
      //console.log(data);
    },

    //  获取所有的数据列表
    async getDepartmentList() {
      //console.log(11111);
      const res = await departmentApi();
      //console.log(res, 3333);
      this.depts = tranListToTreeData(res.depts, "");
      /* 获取动态标题===公司名称 */
      this.company = {
        name: res.companyName,
        manager: "负责人",
        id: ""
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.departments-container {
  .box-card {
    padding: 80px;
  }
}
</style>
